<style>
    .navbar-edit table tbody {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none;
    }

    .navbar-edit table tbody tr td:nth-child(1) {
        cursor: pointer;
    }

    .navbar-edit table tbody tr.second {
        display: none;
    }

    .navbar-edit table tbody tr.second td:nth-child(1) {
        padding-left: 80px;
    }

    .navbar-edit table tbody tr td.td-tree .fa {
        margin: 0 10px;
    }

    .navbar-edit table tbody tr td.td-tree i[class*='fa-folder'] {
        color: #67b2dd;
    }

    .navbar-edit table tbody tr td.td-tree .fa.fa-leaf {
        color: #008000;
    }

    .navbar-edit table th, .navbar-edit table td {
        text-align: center;
    }

    .navbar-edit table tr td:nth-child(1) {
        text-align: left;
    }

    .navbar-edit table.table-hover tbody tr:hover {
        background-color: rgba(185, 236, 197, 0.5);
    }

    .navbar-edit table th.menu-name {
        text-align: left;
    }

    .content .panel-heading .btn {
        border-redius: 15px !important;
    }

    .content table td .btn {
        padding: 2px 4px 2px 2px;
        font-size: 12px;
        border-radius: 5px;
        width: 100%;
    }

    .content table td .btn .fa-sort-desc {
        position: relative;
        top: -4px;
    }

    /*@media screen and (min-width: 1200px) {
        .content table td.table-operate{
            width:200px;
        }
    }*/
    .content table td.table-operate {
        width: 200px;
    }

    .content table td.table-operate {
        /* padding:5px 10px;*/
    }

    .content table td.table-operate span {
        padding: 3px 3px;
    }

    .navbar-edit-focus {
        background-color: rgba(236, 135, 40, 0.2);
    }
</style>
<div class="panel panel-info navbar-edit">
    <div class="panel-heading">
        菜单操作
    </div>
    <table class="table table-bordered table-hover" id="navbar-table">
        <thead>
        <tr>
            <th class="menu-name" width="30%">菜单名称</th>
            <th class="hidden-xs">菜单地址</th>
            <th class="hidden-xs">图标</th>
            <th class="hidden-xs hidden-sm">提示信息</th>
            <th class="hidden-xs hidden-sm">左/右浮动</th>
            <th class="hidden-xs">排序</th>
            <th>是否启用</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- <tr class="first" co="close">
             <td class="td-tree"><i class="fa fa-folder fa-lg" readonly="readonly"></i>产品 A</td>
             <td class="hidden-xs">200</td>
             <td class="hidden-xs">产品 A-1</td>
             <td class="hidden-xs hidden-sm">200</td>
             <td class="hidden-xs hidden-sm">产品 A-1</td>
             <td class="hidden-xs">200</td>
             <td>启用</td>
             <td class="table-operate">
                 <span class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                     <a class="btn btn-danger opt-del dropdown-toggle" id="" data-toggle="dropdown">
                         操作
                          <i class="fa fa-sort-desc fa-lg"></i>
                     </a>
                 </span>
                 <span class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="btn btn-warning opt-edit"><i class="fa fa-edit fa-md"></i> 编辑 </a></span>
                 <span class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="btn btn-primary opt-enable"><i class="fa fa-navicon fa-md"></i> 启用 </a></span>
             </td>
         </tr>
             <tr class="second">
                 <td class="td-tree"><i class="fa fa-leaf fa-lg"></i>产品 A-1</td>
                 <td class="hidden-xs">200</td>
                 <td class="hidden-xs">产品 A-1</td>
                 <td class="hidden-xs hidden-sm">200</td>
                 <td class="hidden-xs hidden-sm">产品 A-1</td>
                 <td class="hidden-xs">200</td>
                 <td>启用</td>
                 <td class="table-operate">
                     <span class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                         <a class="btn btn-danger opt-del dropdown-toggle" id="" data-toggle="dropdown">
                             操作
                             <i class="fa fa-sort-desc fa-lg"></i>
                         </a>
                     </span>
                     <span class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="btn btn-warning opt-edit"><i class="fa fa-edit fa-md"></i> 编辑 </a></span>
                     <span class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="btn btn-primary opt-enable"><i class="fa fa-navicon fa-md"></i> 启用 </a></span>
                 </td>
             </tr>
         <tr class="first" co="close">
             <td class="td-tree"><i class="fa fa-leaf fa-lg"></i>产品 C</td>
             <td class="hidden-xs">200</td>
             <td class="hidden-xs">产品 A-1</td>
             <td class="hidden-xs hidden-sm">200</td>
             <td class="hidden-xs hidden-sm">产品 A-1</td>
             <td>200</td>
             <td>不启用</td>
             <td class="table-operate">
                 <span class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                     <a class="btn btn-danger opt-del dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
                         操作
                          <i class="fa fa-sort-desc fa-lg"></i>
                     </a>
                     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                       <li role="presentation" >
                          <a role="menuitem" tabindex="-1" href="#">启用</a>
                       </li>
                       <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">禁用</a>
                       </li>
                       <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">删除</a>
                       </li>
                    </ul>
                 </span>
                 <span class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="btn btn-warning opt-edit"><i class="fa fa-edit fa-md"></i> 编辑 </a></span>
                 <span class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="btn btn-primary opt-enable"><i class="fa fa-navicon fa-md"></i> 启用 </a></span>
             </td>
         </tr>
     </tbody>-->
    </table>
</div>
<script>
    $(function () {
        loadNavBarList();//加载导航树形菜单
        $("#navbar-table tbody").on("click", "tr.first  td.td-tree", navbarEditTrClick);//树形菜单展开
        $("#navbar-table tbody").on("click", "td.table-operate a", operateBtnClick);//操作按钮事件
        $("#navbar-table tbody").on("click", "td.table-operate ul a", statusBtnClick);//状态操作
    })

    function loadNavBarList() {
        var def = $.ajax({
            url: "../navbar/back/getNavBarAll.zb",
            type: "POST",
            dataType: "JSON"
        });
        def.done(loadNavBarListDone);
        def.fail(loadNavBarListFail);
        def.always(function () {
            $(".content_loading").hide();
        });
    }

    function loadNavBarListDone(data) {
        if (!data) {
            alert("加载数据失败！");
            return false;
        }
        var $tbody = $("#navbar-table tbody");
        for (var menu in data) {
            var menu = data[menu];
            var parentMenu = menu.parentMenu;
            var subMenu = menu.subMenu;
            var pTr = "";
            if (!subMenu || subMenu.length <= 0) {
                pTr = getTr("first", false, parentMenu);//true：识别是否有子节点
            } else {
                pTr = getTr("first", true, parentMenu);
                for (var i = 0; i < subMenu.length; i++) {
                    pTr += getTr("second", false, subMenu[i]);
                }
            }
            $tbody.append(pTr);
        }
    }

    function loadNavBarListFail() {
        alert("加载失败！");
    }

    function formatNull(value) {
        if (!value) {
            return "";
        } else {
            return value;
        }
    }

    function getTr(className, isCo, menu) {
        var tr = "";
        if (isCo) {
            tr += "<tr class='" + className + "' co='close' data-id='" + menu.id + "'>" +
                "    <td class='td-tree'><i class='fa fa-folder fa-lg'></i>" + menu.menu_name + "</td>";
        } else {
            tr += "<tr class='" + className + "' data-id='" + menu.id + "'>" +
                "    <td class='td-tree'><i class='fa fa-leaf fa-lg'></i>" + menu.menu_name + "</td>";
        }
        tr += "    <td class='hidden-xs'>" + formatNull(menu.menu_url) + "</td>" +
            "    <td class='hidden-xs'><i class='" + menu.icon_class + "'></iclass></td>" +
            "    <td class='hidden-xs hidden-sm'>" + menu.tip + "</td>" +
            "    <td class='hidden-xs hidden-sm'>" + menu.position + "</td>" +
            "    <td class='hidden-xs'>" + menu.orders + "</td>" +
            "    <td class='navBarStatus'>" + fmtNavbarStatus(menu.status) + "</td>" +
            "    <td class='table-operate'>" +
            "        <span class='col-lg-4 col-md-4 col-sm-4 col-xs-12'>" +
            "            <a class='btn btn-danger opt-status dropdown-toggle' id='dropdownMenu'" + menu.id + " data-toggle='dropdown'>" +
            "                状态" +
            "                 <i class='fa fa-sort-desc fa-lg'></i>" +
            "            </a>" +
            "            <ul class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu'" + menu.id + ">" +
            "              <li role='presentation' >" +
            "                 <a role='menuitem' tabindex='-1' data-status='1'>启用</a>" +
            "              </li>" +
            "              <li role='presentation'>" +
            "                 <a role='menuitem' tabindex='-1' data-status='0'>禁用</a>" +
            "              </li>" +
            "              <li role='presentation'>" +
            "                 <a role='menuitem' tabindex='-1' data-status='-1'>回收站</a>" +
            "              </li>" +
            "           </ul>" +
            "        </span>" +
            "        <span class='col-lg-4 col-md-4 col-sm-4 col-xs-12'><a class='btn btn-warning opt-edit'><i class='fa fa-edit fa-md'></i> 编辑 </a></span>";
        if (className == "first") {
            tr += "<span class='col-lg-4 col-md-4 col-sm-4 col-xs-12'><a class='btn btn-primary opt-add'><i class='fa fa-plus fa-md'></i> 添加 </a></span>";
        }
        tr += "    </td>" +
            "</tr>";
        return tr;
    }

    function fmtNavbarStatus(status) {
        if (status == 1) {
            return "启用";
        } else if (status == 0) {
            return "禁用";
        } else if (status == -1) {
            return "回收站";
        } else {
            return "";
        }
    }

    function navbarEditTrClick() {
        var $this_tr = $(this).parent();
        var $tr = $this_tr.nextUntil("tr[class^='first']");
        if ($tr.length <= 0) {
            return false;
        }
        var co = $this_tr.attr("co")
        var $i = $this_tr.find("td.td-tree i");
        if (co == "close") {
            $i.removeClass("fa-folder");
            $i.addClass("fa-folder-open");
            $this_tr.attr("co", "open")
        } else {
            $i.removeClass("fa-folder-open");
            $i.addClass("fa-folder");
            $this_tr.attr("co", "close")
        }
        $tr.toggle();
    }

    function operateBtnClick() {
        if ($(this).hasClass("opt-status")) {
            //什么都不做，bootstrap自动触发
        } else if ($(this).hasClass("opt-edit")) {
            var $tr = $(this).parents("tr");
            var $tds = $(this).parents("td").siblings();
            if ($(this).attr("data-status") == "save") {
                $tr.removeClass("navbar-edit-focus");
                $tds.removeAttr("contenteditable");
                $tr.removeClass("navbar-edit-focus");
                $(this).html("<i class='fa fa-edit fa-md'></i> 编辑 ").attr("data-status", "edit");
                console.log("保存成功")
            } else {
                $tds.attr("contenteditable", true).eq(0).focus();
                $tr.addClass("navbar-edit-focus").attr("data-status", "save");
                $(this).html("<i class='fa fa-edit fa-md'></i> 保存 ").attr("data-status", "save");
            }
        } else if ($(this).hasClass("opt-add")) {
            console.log("添加节点")
        }
    }

    function statusBtnClick() {
        var $this = $(this);
        var status = $this.attr("data-status");
        var id = $this.parents("tr").attr("data-id");
        if (!/\d/.test(status) || !/\d/.test(id)) {
            layer.msg("参数错误！");
            return false;
        }
        $.ajax({
            url: "../navbar/back/updateStatus.zb",
            type: "POST",
            dataType: "JSON",
            data: {id: id, status: status},
            success: function (data) {
                if (data && data.success) {
                    $this.parents("tr").find("td.navBarStatus").text($this.text().trim())
                    layer.msg(data.msg);
                } else {
                    layer.msg(data.msg || "操作失败！");
                }
            }, error: function () {
                layer.msg('可能由于网路原因操作失败！', function () {
                });
            }
        })
    }
</script>